<template>
  <div class="image-container" @mousemove="handleMouseMove" @click="handleClick">
    <img :src="imageUrl" alt="实验室平面图" class="lab-image" ref="labImage">
    <div 
      v-for="(zone, key) in zones" 
      :key="key"
      class="zone-highlight"
      :style="getZoneStyle(zone)"
      @mouseover="hoverKey = key"
      @mouseout="hoverKey = null"
      :class="{ 'hovered': hoverKey === key }"
    ></div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import labMap from '@/assets/lab-map.png'

export default {
  setup() {
    const router = useRouter()
    const labImage = ref(null)
    const hoverKey = ref(null)
    const imageUrl = ref(labMap)
    
    // 定义实验室区域信息
    const zones = ref({})
    
    // 初始化区域
    const initZones = () => {
      const zoneInfo = [
        { base: "Slug", x: 40, y: 200, cols: 2, rows: 1, w: 80, h: 55 },
        { base: "Quadro", x: 250, y: 200, cols: 2, rows: 1, w: 80, h: 55 },
        { base: "Acoustic", x: 470, y: 270, cols: 1, rows: 1, w: 80, h: 80 },
        { base: "Calorimeter_L", x: 75, y: 300, cols: 3, rows: 1, w: 40, h: 50 },
        { base: "Calorimeter_LR", x: 245, y: 300, cols: 4, rows: 1, w: 40, h: 50 },
        { base: "Calorimeter_R", x: 730, y: 220, cols: 1, rows: 1, w: 100, h: 130 },
        { base: "Reliability_L", x: 30, y: 120, cols: 4, rows: 1, w: 40, h: 50 },
        { base: "Reliability_LR", x: 245, y: 120, cols: 4, rows: 1, w: 40, h: 50 },
        { base: "Reliability_R", x: 730, y: 100, cols: 1, rows: 1, w: 160, h: 100 },
        { base: "Storage", x: 30, y: 300, cols: 1, rows: 1, w: 45, h: 50 }
      ]
      
      const result = {}
      
      zoneInfo.forEach(zone => {
        const { base, x: startX, y: startY, cols, rows, w, h } = zone
        
        for (let r = 0; r < rows; r++) {
          for (let c = 0; c < cols; c++) {
            const x = startX + c * (w + 5)
            const y = startY + r * (h + 5)
            const key = `${base}_${r}_${c}`
            
            result[key] = { x, y, w, h }
          }
        }
      })
      
      zones.value = result
    }
    
    // 获取区域样式
    const getZoneStyle = (zone) => {
      return {
        left: `${zone.x}px`,
        top: `${zone.y}px`,
        width: `${zone.w}px`,
        height: `${zone.h}px`
      }
    }
    
    // 处理鼠标移动
    const handleMouseMove = (e) => {
      // 这里可以添加更精确的悬停检测逻辑
    }
    
    // 处理点击事件
    const handleClick = (e) => {
      if (hoverKey.value) {
        router.push({ name: 'Grid', params: { id: hoverKey.value } })
      }
    }
    
    onMounted(() => {
      initZones()
      // 如果图片加载失败，使用占位图
      labImage.value.onerror = function() {
        imageUrl.value = 'https://via.placeholder.com/941x525'
      }
    })
    
    return {
      labImage,
      hoverKey,
      imageUrl,
      zones,
      getZoneStyle,
      handleMouseMove,
      handleClick
    }
  }
}
</script>

<style scoped>
.image-container {
  position: relative;
  width: 100%;
  height: 525px;
  background-color: #eee;
  overflow: hidden;
  margin-bottom: 20px;
}

.lab-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: white;
}

.zone-highlight {
  position: absolute;
  background-color: rgba(0, 128, 255, 0.3);
  border: 2px solid rgba(0, 128, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s;
}

.zone-highlight.hovered {
  background-color: rgba(0, 128, 255, 0.5);
}

@media (max-width: 768px) {
  .image-container {
    height: 300px;
  }
}
</style>